img {
width: auto ;
max-width: 100% ;
height: auto ;
image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering: -o-crisp-edges; /* Opera */
image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming) */
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
}

/* max screen size */

@media all and (min-width: 1050px) {
#container {
display: flex ;
flex-flow: row wrap ;
}
#header1 {
order: 1 ;
text-align: right ;
padding-top: 5vh ;
max-height: 12vh ;
width: 50% ;
}
#header1 img {
	max-height: 100% ;
}
#header2 {
order: 2 ;
text-align: left ;
padding-top: 5vh ;
max-height: 12vh ;
width: 50% ;
align-self: flex-end ;
}
#header2 img {
	max-width: 16% ;
	max-height: 12vh ;
}
#leftmargin {
order: 1 ;
width: 5vw
}
#content {
order: 2 ;
width: 70vw ;
text-align: right ;
height: 76vh ;
padding-top: 3vh ;
}
#ToC {
order: 3 ;
width: 20vw ;
height: 76vh ;
padding-top: 3vh
}
#bottomToC {
order: 4 ;
display: none ;
}
}

/* medium screen width */


@media all and (min-width: 900px) and (max-width: 1049px) {
#container {
display: flex ;
flex-flow: row wrap ;
}
#header1 {
order: 1 ;
text-align: right ;
padding-top: 3vh ;
max-height: 8vh ;
width: 50% ;
}
#header1 img {
	max-height: 100% ;
}
#header2 {
order: 2 ;
text-align: left ;
padding-top: 3vh ;
max-height: 8vh ;
width: 50% ;
align-self: flex-end ;
}
#header2 img {
	max-width: 16% ;
}
#leftmargin {
order: 1 ;
display: none ;
}
#bottomToC {
order: 2 ;
display: none ;
}
#content {
order: 3 ;
width: 80% ;
text-align: right ;
height: 79vh ;
padding-top: 1vh
}
#ToC {
order: 4 ;
width: 20% ;
height: 79vh ;
padding-top: 1vh
}
}

/* small screen portrait */

@media all and (max-width: 899px) {
#container {
display: flex ;
flex-flow: column wrap ;
align-items: stretch ;
}
#header1 {
float: left ;
padding-top: 1vh ;
max-height: 15vh ;
width: 50% ;
}
#header1 img {
	max-height: 15vh ;
}
#header2 {
float: left ;
text-align: left ;
padding-top: .5vh ;
max-height: 12vh ;
width: 75% ;
}
#header2 img {
	max-height: 12vh ;
	max-width: 31% ;
}
#content {
order: 1 ;
width: 100% ;
text-align: center ;
height: 70vh ;
padding-top: 3vh
}
#ToC {
order: 2 ;
width: 100% ;
display: none ;
}
#leftmargin {
order: 3 ;
display: none ;
}
#bottomToC {
order: 4 ;
text-align: center ;
width: 100% ;
padding-top: 1vh
}
}

/* small screen landscape */
@media all and (max-width: 899px) and (orientation:landscape) {
#container {
display: flex ;
flex-flow: column wrap ;
align-items: stretch ;
}
#header1 {
float: left ;
padding-top: 1vh ;
max-height: 15vh ;
width: 50% ;
}
#header1 img {
	max-height: 15vh ;
}
#header2 {
float: left ;
text-align: left ;
padding-top: .5vh ;
max-height: 15vh ;
width: 75% ;
}
#header2 img {
	max-height: 15vh ;
	max-width: 32% ;
}
#content {
order: 1 ;
width: 100% ;
text-align: center ;
height: 70vh ;
padding-top: 1vh ;
}
#ToC {
order: 2 ;
width: 100% ;
display: none ;
}
#leftmargin {
order: 3 ;
display: none ;
}
#bottomToC {
order: 4 ;
text-align: center ;
width: 100% ;
}
}